﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="NewsDark.ItemDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NewsDark"
    xmlns:data="using:NewsDark.Data"
    xmlns:common="using:NewsDark.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.TopAppBar>
        <AppBar>
            <Button x:Name="btnHome" HorizontalAlignment="Left" Style="{StaticResource HomeAppBarButtonStyle}" Click="btnHome_Click_1"/>
        </AppBar>
    </Page.TopAppBar>
    <Page.Resources>

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="Items"
            />
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"
            d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid
        Style="{StaticResource LayoutRootStyle}"
        DataContext="{Binding Group}"
        d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}">
        <Grid.Background>
            <ImageBrush ImageSource="Assets/Images/Background.jpg"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>



        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Text="News Headline" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1" IsHitTestVisible="false"/>
            <StackPanel x:Name="imgLogo" HorizontalAlignment="Right" Width="150" Height="100" Margin="0,0,10,0" Grid.Column="1"   VerticalAlignment="Center">
                <Image  
                   Source="/Assets/AppLogo.png"/>
            </StackPanel>

        </Grid>
        <ScrollViewer x:Name="mainContent" Grid.Row="1" Style="{StaticResource HorizontalScrollViewerStyle}">
            <StackPanel x:Name="container" Margin="120,0,0,0" Orientation="Horizontal" >
                <Grid HorizontalAlignment="Left" Height="451" Margin="0" VerticalAlignment="Top" Width="975">
                    <Grid.Background>
                        <ImageBrush ImageSource="Assets/Images/paperbg.png"/>
                    </Grid.Background>
                    <Image Height="200" Margin="30,30,0,0" Source="Assets/Images/1.jpg" Stretch="Fill" Width="295" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Bottom" Width="295" Foreground="Black" FontSize="13.333" Margin="30,0,0,32" Height="167">
                		<Run Text="Pellentesque:Mauris quis interdum porta,  urna sapien ultrices velit, nec venenatn augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus  vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante "/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="&quot;Curabitur class aliquam vestibulum nam curae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt,&quot; eu rutrum ligula."/>
                    </TextBlock>
                    <TextBlock HorizontalAlignment="Center" Margin="0,20,0,30" TextWrapping="Wrap" VerticalAlignment="Top" Width="295" Foreground="Black" FontSize="13.333" Height="451">
                		<Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante, &quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante&quot;Curabitur class aliquam vestibulum nam curae. "/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat &quot;ipsum dolor sit amet&quot;."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue ipsum dolor sit amet."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run FontFamily="Verdana, Arial, Arial Unicode MS, Lucida Sans Unicode, Lucida Grande" Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                    </TextBlock>
                    <TextBlock HorizontalAlignment="Right" Margin="0,20,30,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="295" Foreground="Black" FontSize="13.333" Height="451">
                		<Run Text="Curabitur class aliquam vestarturient ulpendisse nunc  commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat "/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante&quot;."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis iices velit, nec venenae, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris, dui odio in augue. Cras posuere, enim a males,dipiscing neque tortor ac erat."/>
                    </TextBlock>
                </Grid>
                <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.Row="1"
           Margin="80,0,0,0"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard500x130ItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
                    ItemClick="itemGridView_ItemClick_1"
                 
            >
                    <GridView.Template>
                        <ControlTemplate>
                            <ItemsPresenter/>
                        </ControlTemplate>
                    </GridView.Template>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="1,0,0,6">
                                        <TextBlock Text="Related Stories" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
            </StackPanel>
        </ScrollViewer>
        <ScrollViewer x:Name="SnapGrid" Grid.Row="1" Visibility="Collapsed" Style="{StaticResource VerticalScrollViewerStyle}">
            <Grid Background="White" Width="300">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Height="200" Margin="10" Source="Assets/Images/1.jpg" Stretch="Fill" Width="280"  Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Grid Grid.Row="1" Background="White" Width="295">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Bottom" Width="285" Foreground="Black" FontSize="13.333" Margin="10,0,0,10" Height="167">
                		<Run Text="Pellentesque:Mauris quis interdum porta,  urna sapien ultrices velit, nec venenatn augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus  vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante "/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="&quot;Curabitur class aliquam vestibulum nam curae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt,&quot; eu rutrum ligula."/>
                    </TextBlock>
                    <TextBlock Grid.Row="1" HorizontalAlignment="Left" Margin="10,0,0,30" TextWrapping="Wrap" VerticalAlignment="Top" Width="285" Foreground="Black" FontSize="13.333" Height="451">
                		<Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante, &quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante&quot;Curabitur class aliquam vestibulum nam curae. "/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat &quot;ipsum dolor sit amet&quot;."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue ipsum dolor sit amet."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run FontFamily="Verdana, Arial, Arial Unicode MS, Lucida Sans Unicode, Lucida Grande" Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                    </TextBlock>
                    <TextBlock Grid.Row="2" HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="285" Foreground="Black" FontSize="13.333" Height="451">
                		<Run Text="Curabitur class aliquam vestarturient ulpendisse nunc  commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat "/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante&quot;."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris quis iices velit, nec venenae, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
                		<LineBreak/>
                		<Run/>
                		<LineBreak/>
                		<Run Text="Pellentesque porta, mauris, dui odio in augue. Cras posuere, enim a males,dipiscing neque tortor ac erat."/>
                     </TextBlock>
                </Grid>
            </Grid>
        </ScrollViewer>
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="container" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="mainContent" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imgLogo" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
